<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Vue 第二阶段</title>
    <script src="js/vue.js"></script>
</head>
<style>
    ul {
        list-style: none;
    }

    li {
        margin-top: 10px;
    }

    div {
        margin-top: 10px;
    }
    /* 必需 */
    .expand-transition {
        transition: all .3s ease;
        height: 30px;
        padding: 10px;
        background-color: #eee;
        overflow: hidden;
    }

    /* .expand-enter 定义进入的开始状态 */
    /* .expand-leave 定义离开的结束状态 */
    .expand-enter, .expand-leave {
        height: 0;
        padding: 0 10px;
        opacity: 0;
    }
</style>
<body>
<div id="app">
    <div>
        <h3>列表渲染</h3>
        <ul>
            <li v-for="s in students" track-by="id">
                {{s.name}}
            </li>
        </ul>
    </div>
    <div>
        <h3>v-for对象</h3>
        <ul>
            <li v-for="b in book">
                {{$key}} {{b}}
            </li>
        </ul>
    </div>
    <div>
        <h3>v-for 值域</h3>
        <div>
            <span v-for="n in 10">{{ n }} </span>
        </div>
    </div>
    <div>
        <button v-on:click="say('hello',$event)">say hello</button>
    </div>
    <div>
        <input type="checkbox" v-model="checked"> {{checked}}
    </div>
    <div>
        <input type="checkbox" v-model="selectHobby" value="篮球"/>
        <input type="checkbox" v-model="selectHobby" value="乒乓球"/>
        {{selectHobby}}
    </div>
    <div>
        <h3>单选</h3>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>
    <div>
        {{name}}
        <input v-model="name" placeholder="请输入名字" lazy><br/>
        {{age}}
        <input v-model="age" number><br>
        {{keyword}}
        <input v-model="keyword" debounce="500">
    </div>
    <div v-if="show" transition="expand">hello</div>
</div>
</body>
</html>
<script>
    //开启Debug
    Vue.config.debug = true
    var vm = new Vue({
        el: '#app',

        data: {
            name: '赵云',
            age: 29,
            keyword:'vue',
            students: [
                {
                    id: 1,
                    name: '张三'
                },
                {
                    id: 2,
                    name: '李四'
                }, {
                    id: 3,
                    name: '赵六'
                }],
            book: {
                id: 1,
                author: '尤小右',
                age: 20,
                address: 'USA'
            },
            checked: false,
            selectHobby: [],
            picked: 1,
            show:true
        },
        created: function () {
            console.log('实例化 结束了....');
        },
        beforeCompile: function () {
            console.log('beforeCompile');
        },
        compiled: function () {
            console.log('compiled');
        },
        ready: function () {
            console.log('ready');
        },
        beforeDestroy: function () {
            console.log('beforeDestroy');
        },
        destroyed: function () {
            console.log('destroyed');
        },
        computed: {},
        methods: {
            say: function (content, event) {
                alert(event.target.textContent);
                event.preventDefault();
            }
        }
    })

    vm.students = vm.students.filter(function (s) {
        return s.id != 2;
    });
    vm.students[1].name = '张飞';
    //    vm.students[1]={
    //        id:98,
    //        name:'刘备'
    //    }


</script>